<template>
  <div class="home">
    <div class="home-main">
      <el-container>
        <el-aside width="collapse">
          <asideLeft></asideLeft>
        </el-aside>
        <el-container>
          <el-header>
            <headers class="home-header"></headers>
          </el-header>
          <el-main>
            <transition name="el-zoom-in-left">
              <router-view></router-view>
            </transition>

          </el-main>
<!--          <el-footer>Footer</el-footer>-->
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import asideLeft from './aside/index'
import headers from './component/header'

export default {
  name: 'home',
  components: {
    asideLeft,
    headers
  },

  created() {

    if (this.$route.fullPath=='/'){
      this.$router.push('/homeView')
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .home-main {
    height: 100%;

    .el-container {
      height: 100%;
    }
  }
}

.el-header{
  display: flex;
  align-items: center;

  .home-header{
    flex: 1;
  }
}
.el-aside {
  background-color: #545c64;
}

.el-main {
  background-color: #E9EEF3;
  border-radius: 20px;
}
</style>
